<template>
	<view class="category_tab">
		<view class="category_tab_title">
			<view class="title_inner">
				<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem"
					styleType="text" activeColor="#d4237a">
				</uni-segmented-control>
			</view>
			<navigator url="/pages/search/index" open-type="switchTab" class="iconfont icon-sousuo"></navigator>
		</view>
		<scroll-view @scrolltolower="handleToLower"  scroll-y class="category_tab_content">
			<view class="cate_item_wrap">
				<view class="cate_item" v-for="(item,index) in vertical" :key="item.id">
					<go-detail :list="vertical" :index="index">
						<image :src="item.thumb" mode="widthFix"></image>
					</go-detail>
					
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import goDetail from '../../components/goDetail.vue'
	export default {
		components:{
			goDetail
		},
		data() {
			return {
				items: [{
						title: "最新",
						order: "new"
					},
					{
						title: "热门",
						order: "hot"
					}
				],
				current: 0,
				params: {
					limit: 30,
					skip: 0,
					order: "new"
				},
				id: 0,
				// 页面显示数据的数组
				vertical: [],
				hasMore:true
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getList()
		},
		methods: {
			// 滑到最下面请求新数据
			handleToLower(){
				// 根据是否还有更多数据来判断是否要再发起请求
				if(this.hasMore){
					this.params.skip+=this.params.limit;
					this.getList()
				}else{
					uni.showToast({
						title:"没有更多数据了",
						icon:"none"
					})
				}
			},
			onClickItem(e) {
				// 根据被点击的标题 切换标题
				this.current = e.currentIndex;
				// 切换order
				this.params.order = this.items[this.current].order;
				// 清空vertical
				this.vertical=[]
				// 清空跳过的条数
				this.params.skip=0
				// 重新发送请求
				this.getList();
			},
			getList() {
				this.request({
					url: `/v1/vertical/category/${this.id}/vertical`,
					data: this.params
				}).then(result => {
					console.log(result);
					if(result.res.vertical.length===0){
						uni.showToast({
							title:"没有更多数据了",
							icon:"none"
						})
						this.hasMore=false;
						return;
					}
					// 拼接数据
					this.vertical = [...this.vertical,...result.res.vertical];
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.category_tab {
		.category_tab_title {
			position: relative;

			.title_inner {
				width: 60%;
				margin: 0 auto;
			}

			.icon-sousuo {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: 5%;
			}
		}
		.category_tab_content{
			height: calc(100vh - 36px);
			.cate_item_wrap{
				display: flex;
				flex-wrap: wrap;
				.cate_item{
					width: 33.33%;
					border: 5rpx solid #FFFFFF;
					image{}
				}
			}
		}
	}
</style>
